<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="../static/bootstrap.min.css">
    <link rel="stylesheet" href="../static/Message Broad.css">

    <script src="../static/bootstrap.min.js"></script>
    <script src="../static/jquery.min.js"></script>
    <script src="../static/popper.min.js"></script>

    <title>Message Broad</title>
</head>

<body>
    <!--head-->
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="head-logo">
                    <h1>
                        <a class="text-dark" href="#">
                            Message Broad
                        </a>
                    </h1>
                    <p>Note your life!</p>
                </div>
            </div>
        </div>
    </div>

    <!--menu-->
    <div class="container bg-dark">
        <div class="row">
            <div class="col">
                <nav class="navbar navbar-expand-lg navbar-ligh">
                    <ul class="navbar-nav nav-pills mr-auto">
                        <li class="nav-item">
                            <a class="nav-link font-weight-normal active" href="/">
                                Home Page
                            </a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link font-weight-normal" href="/">
                                Home Page
                            </a>
                        </li>
                    </ul>


                    {% if current_user.is_authenticated %}
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link font-weight-normal" href="{{url_for('main.index')}}">
                                Hi! {{current_user.user_name}}
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link font-weight-normal" href="{{url_for('loginview.logout')}}">
                                注销
                            </a>
                        </li>
                    </ul>
                    {% else %}
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link font-weight-normal" href="{{url_for('loginview.login')}}">
                                登录
                            </a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link font-weight-normal" href="{{url_for('loginview.register')}}">
                                注册
                            </a>
                        </li>
                    </ul>
                    {% endif %}
                </nav>

            </div>

        </div>
    </div>

    <!--Message List-->
    <div class="container">
        <div class="row">
            <div class="col">
                <a href="/" class="hvr-grow">
                    <div class="card border">
                        <div class="card-body bg-light">
                            <h4 class="card-title">title</h4>
                            <p class="card-text">here is the text</p>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <a href="/" class="hvr-grow">
                    <div class="card border">
                        <div class="card-body bg-light">
                            <h4 class="card-title">title</h4>
                            <p class="card-text">here is the text</p>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <a href="/" class="hvr-grow">
                    <div class="card border">
                        <div class="card-body bg-light">
                            <h4 class="card-title">title</h4>
                            <p class="card-text">here is the text</p>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <a href="/" class="hvr-grow">
                    <div class="card border">
                        <div class="card-body bg-light">
                            <h4 class="card-title">title</h4>
                            <p class="card-text">here is the text</p>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</body>

</html>